<template>
	<view>
		<nav-bar :title="title" :autoBack="true"></nav-bar>
		<view class="u-page">
			<u-row>
				<u-col span="5">
					<u-checkbox-group v-model="checkboxValueLeft" placement="column">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in indexListLeft" :key="item.name" :label="item.name" :name="index">
						</u-checkbox>
					</u-checkbox-group>
				</u-col>
				<u-col span="2">
					<button type="primary" size="mini" style="display: flex;" @click="selectToRight">
						<text style="flex-shrink: 0;">选中</text>
						<u-icon name="arrow-right" color="#fff" size="12" style="flex-shrink: 1;"></u-icon>
					</button>
					<button size="mini" style="display: flex;" @click="selectToLeft">
						<u-icon name="arrow-left" color="#000" size="12" style="flex-shrink: 1;"></u-icon>
						<text style="flex-shrink: 0;">撤回</text>
					</button>
				</u-col>
				<u-col span="5">
					<u-checkbox-group v-model="checkboxValueRight" placement="column">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in indexListRight" :key="index" :label="item.name" :name="index">
						</u-checkbox>
					</u-checkbox-group>
				</u-col>
			</u-row>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "穿梭框demo",
				checkboxValueLeft: [],
				checkboxValueRight: [],
				indexListLeft: [{
					name: '列表1'
				}, {
					name: '列表2'
				}, {
					name: '列表3'
				}, {
					name: '列表4'
				}, ],
				indexListRight: [{
					name: '列表1-右'
				}, {
					name: '列表2-右'
				}, {
					name: '列表3-右'
				}, {
					name: '列表4-右'
				}, ],
			}
		},
		onLoad() {},
		methods: {
			selectToRight() {
				var removeArr = _.remove(this.indexListLeft, (value, index) => {
					return this.checkboxValueLeft.includes(index);
				});
				// this.indexListLeft=this.indexListLeft
				this.indexListRight.push(...removeArr)
				this.checkboxValueLeft = []
			},
			selectToLeft() {
				var removeArr = _.remove(this.indexListRight, (value, index) => {
					return this.checkboxValueRight.includes(index);
				});
				this.indexListLeft.push(...removeArr)
				this.checkboxValueRight = []
			},
		},
	}
</script>

<style>
</style>
